<template>
  <b-row class="pb-3">
    <b-col class="animated fadeInLeft">
        <h2 class="title py-2">
          <b-link class="title-content" :to="{name:'detail', params:{id: post.id}}">{{post.title}}</b-link>
        </h2>
        <div class="content fw-light">
            {{post.content}}
        </div>
        <div class="info my-2">
          <span class="create-time me-3"><i class="zi zi_clock mx-2" zico="时钟"></i>{{post.create_time}}</span>
          <span class="view-count me-3"><i class="zi zi_eye mx-2" zico="眼睛"></i>{{post.statistic}}</span>
          <span class="comment-count"><i class="zi zi_commentdots mx-2" zico="消息黑"></i>{{post.comment_count}}</span>
        </div>
        <div class="more mt-4">
            <b-button class="more-btn py-2 px-3 fw-light border-0" 
            :to="{name:'detail', params:{id: post.id}}"
            >阅读更多 ></b-button>
        </div>
    </b-col>
  </b-row>
</template>

<script>
export default {
  name: 'Brief',
  props: ['post'],
};
</script>

<style lang="less" scoped>
.title a{
    color: inherit;
    text-decoration: none;
    font-weight: 400;
}
.title-content{
  border-bottom: 1px solid transparent;
  padding-bottom: .2em;
  transition: all .2s ease-out;
}
.title a:hover{
    color: rgb(208, 66, 44) !important;
    border-bottom: 1px solid rgb(208, 66, 44);
}
.content{
    word-wrap: break-word;
}
.more-btn{
    background-color: rgb(239, 239, 239);
    color: #666;
}
</style>